<template>
  <div class="showBox">
    <div class="head">
      <select-store @handleChange="optionChange" />
      <div class="serach">
        <el-input
          size="small"
          placeholder="请输入经理姓名进行搜索"
          v-model="searchKey"
        ></el-input>
        <el-button size="small" @click="searchBy">搜索</el-button>
      </div>

      <div class="add">
        <el-button type="primary" size="mini" @click="add">新增</el-button>
        <el-button type="danger" size="mini" @click="deleteBy()"
          >删除</el-button
        >
      </div>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        v-loading="tableDataLoading"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="50"
        ></el-table-column>
        <el-table-column
          prop="warZoneName"
          label="大区"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="baseName"
          label="营销区域"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="managerName"
          label="营销区域经理"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="orgName"
          label="辖区门店"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="deleteBy(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="paging">
      <el-pagination
        @size-change="SizeChange"
        @current-change="CurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      :visible.sync="dialogByAdd"
      width="50%"
      title="新增关联"
      top="100px"
      :before-close="handleClose"
    >
      <div class="form">
        <el-form :model="formObj">
          <el-form-item label="营销区域选择">
            <el-select
              v-model="formObj.baseValue"
              placeholder="请选择营销区域"
              style="width: 100%"
              @change="handleMangerList"
            >
              <el-option
                v-for="(item, index) in baseData"
                :key="index"
                :label="item.orgName"
                :value="item.orgSeq"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业务经理">
            <el-select
              v-model="formObj.baseManagerValue"
              placeholder="请选择业务经理"
              style="width: 100%"
              @change="handleManagerValue"
            >
              <el-option
                v-for="(item, index) in managerData"
                :key="index"
                :label="item.realName"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="门店选择">
            <el-select
              v-model="formObj.baseStoreValue"
              placeholder="请选择门店"
              multiple
              style="width: 100%"
              @change="handleBaseNoRelation"
            >
              <el-option
                v-for="(item, index) in baseNoRelation"
                :key="index"
                :label="item.orgName"
                :value="item.orgSeq"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="save">确定</el-button>
        <el-button size="small" @click="handleClose">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import selectStore from '../components/selectStore';
import {
  getBaseCenterData,
  getBaseCenterManage,
  getBaseCenterMangerList,
  queryOrgAndBaseNoRelation,
  addOrgManager,
  deleteOrgManager,
} from '@/api/smartShops';
export default {
  components: { selectStore },
  props: {},
  data() {
    return {
      tableDataLoading: false,
      searchKey: '',
      value: '',
      options: [],
      tableData: [],
      pageSize: 10,
      total: 0,
      currentPage: 1,
      dialogByAdd: false,
      formObj: {
        baseValue: '',
        baseManagerValue: '',
        baseStoreValue: [],
      },
      orgSeq: '',
      childSeq: '',
      baseData: [],
      managerData: [],
      baseNoRelation: [],
      baseNoRelationId: '',
      storeInfoList: [],
      multipleSelection: [],
    };
  },
  watch: {},
  computed: {},
  methods: {
    searchBy() {
      this.getData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    deleteBy(row) {
      if (!row && this.multipleSelection.length === 0) {
        this.$message.error('请选择至少一条数据');
        return;
      }
      this.$confirm('确认要删除记录吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        let data = await deleteOrgManager({
          managerUuidList: !!row
            ? [row.managerUuid]
            : this.multipleSelection.map((item) => {
                return item.managerUuid;
              }),
        });
        if (data.code) {
          this.$message.success(data.message);
          this.getData();
          return;
        }
        this.$message.error(data.message);
      });
    },
    add() {
      this.formObj.baseManagerValue = '';
      this.formObj.baseValue = '';
      this.formObj.baseStoreValue = [];
      this.managerData = [];
      this.baseNoRelation = [];
      this.dialogByAdd = true;
    },
    SizeChange(size) {
      this.pageSize = size;
      this.getData();
    },
    CurrentChange(current) {
      this.currentPage = current;
      this.getData();
    },
    async save() {
      let data = await addOrgManager({
        managerId: this.formObj.baseManagerValue,
        managerName: this.formObj.baseManagerName,
        storeInfoList: this.storeInfoList,
      });
      if (data.code) {
        this.$message({
          type: 'success',
          message: data.message,
        });
        this.handleClose();
        this.getData();
        return;
      }
      this.$message({
        type: 'error',
        message: data.message,
      });
      this.handleClose();
    },
    handleClose() {
      this.dialogByAdd = false;
    },
    optionChange(obj) {
      this.orgSeq = obj[obj.length - 1];
      this.childSeq = obj[obj.length - 1];
      this.getData();
    },

    async getData() {
      this.tableDataLoading = true;
      let { records, total } = await getBaseCenterData({
        size: this.pageSize,
        current: this.currentPage,
        condition: {
          managerName: this.searchKey,
          orgSeq: this.orgSeq,
          managerIds: [],
        },
        ascs: [],
        descs: [],
      });
      this.tableDataLoading = false;
      this.tableData = records;
      this.total = total;
    },
    //营销区域选择
    handleMangerList(val) {
      this.formObj.baseManagerValue = '';
      this.formObj.baseStoreValue = [];
      this.managerData = [];
      this.baseNoRelation = [];
      this.getManagerList(val);
    },
    //业务经理选择
    handleManagerValue(val) {
      this.formObj.baseStoreValue = [];
      this.baseNoRelation = [];
      this.managerData.map((item) => {
        if (item.userId === val) {
          this.formObj.baseManagerName = item.realName;
          this.handleQueryOrgAndBaseNoRelation(val, item.orgSeq);
        }
      });
    },
    //门店选择
    handleBaseNoRelation(val) {
      let list = val;
      this.storeInfoList = [];
      let newList = this.baseNoRelation.filter((item) =>
        list.some((x) => x === item.orgSeq)
      );
      this.storeInfoList = newList.map((item) => {
        return {
          storeOrgId: item.orgSeq,
          storeOrgName: item.orgName,
          storeOrgCode: '',
        };
      });
    },
    //营销区域查询
    async getBaseManage() {
      let { records } = await getBaseCenterMangerList({
        orgSeq: this.orgSeq,
      });
      this.baseData = records;
    },
    //根据营销区域查询业务经理
    async getManagerList(val) {
      let { records } = await getBaseCenterManage({
        orgSeq: val,
      });
      this.managerData = records;
    },
    //根据营销区域查询门店
    async handleQueryOrgAndBaseNoRelation(val, orgSeq) {
      let { records } = await queryOrgAndBaseNoRelation({
        orgSeq: orgSeq,
        managerId: val,
      });
      this.baseNoRelation = records;
    },
  },

  created() {
    this.orgSeq =
      JSON.parse(localStorage.getItem('logininfo')).orgList[0].orgSeq || '';
    this.value = this.orgSeq;
    this.getBaseManage();
    this.getData();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.showBox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  .head {
    border-bottom: 1px solid #dcdfe6;
    width: 100%;
    box-sizing: border-box;
    height: 50px;
    padding: 9px 0;
    display: flex;
    align-items: flex-end;
    position: relative;

    img {
      width: 30px;
      height: 32px;
      margin-right: 10px;
    }

    p {
      padding: 0 10px;
      font-size: 14px;
    }

    .selectStore {
      height: 32px;
      width: 300px;
      display: flex;
      align-items: center;

      .el-cascader {
        width: 200px;
      }
    }

    .serach {
      height: 100%;
      width: 280px;
      height: 32px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      .el-input {
        width: 210px;
      }
    }

    .add {
      height: 32px;
      position: absolute;
      right: 0;
      bottom: 10px;
      display: flex;
      align-items: flex-end;
      justify-content: center;

      .el-button {
        margin: 0 0 0 10px;
      }
    }
  }
  .table {
    /*max-height: calc(100% - 100px);*/
    padding: 10px 0;
    box-sizing: border-box;
    width: 100%;
  }
  .paging {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .form {
    width: 100%;
    min-height: 300px;
  }
}
</style>

<style lang="scss">
.showBox {
  .form {
    .el-select {
      .el-tag {
        font-weight: 500;
      }
    }
  }
}
</style>
